/* indicator */
@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200; 
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -0.8rem;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -2.4rem;
  }
}

/* mesage */
@keyframes message-slide-down-in {
  0% {
    transform: translate3d(0, -8rem, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes message-slide-down-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -8rem, 0);
  }
}
/* messageBox */

@keyframes msgbox-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes msgbox-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}

/* message */

@keyframes message-slide-down-in {
  0% {
    transform: translate3d(0, -8rem, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes message-slide-down-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -8rem, 0);
  }
}